<template>
	<div>
		<div ref="main1" style="width: 130px; height:130px;"></div>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted,
		shallowRef,
		reactive
	} from 'vue';
	import {
		useStore
	} from "vuex";
	import * as echarts from "echarts";

	const props: any = defineProps({
		echartData: Object,
		isTag: Boolean
	})

	const main1 = ref <any> (null)
	const myChart = shallowRef()

	onMounted(() => {
		myChart.value = echarts.init(main1.value)
		chartInit()
	})

	const chartInit = () => {
		let dashedPic = '';
		let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
		let arrName = [];
		let arrValue = [];
		let sum = 0;
		let pieSeries = [];
		let lineYAxis = [];
		// 数据处理
		props.echartData.forEach((v: any, i: number) => {
		  arrName.push(v.name);
		  arrValue.push(v.value);
		  sum = sum + v.value;
		})
		
		// 图表option整理
		props.echartData.forEach((v: any, i: number) => {
		  pieSeries.push({
		    name: '学历',
		    type: 'pie',
		    clockWise: false,
		    hoverAnimation: false,
		    radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
		    center: ["30%", "50%"],
		    label: {
		      show: false
		    },
		    data: [{
		      value: v.value,
		      name: v.name
		    }, {
		      value: sum - v.value,
		      name: '',
		      itemStyle: {
		        color: "rgba(0,0,0,0)"
		      }
		    }]
		  });
		  pieSeries.push({
		    name: '',
		    type: 'pie',
		    silent: true,
		    z: 1,
		    clockWise: false, //顺时加载
		    hoverAnimation: false, //鼠标移入变大
		    radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
		    center: ["30%", "50%"],
		    label: {
		      show: false
		    },
		    data: [{
		      value: 7.5,
		      itemStyle: {
		        color: "#0351b4"
		      }
		    }, {
		      value: 2.5,
		      name: '',
		      itemStyle: {
		        color: "rgba(0,0,0,0)"
		      }
		    }]
		  });
		  v.percent = (v.value / sum * 100).toFixed(1) + "%";
		  lineYAxis.push({
		    value: i,
		    textStyle: {
		      rich: {
		        circle: {
		          color: color[i],
		          padding: [0, 5]
		        }
		      }
		    }
		  });
		})
		let colors = [
			new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
					offset: 1,
					color: '#30dcf3'
				},
				{
					offset: 0,
					color: '#07304c'
				}
			]),
			new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
					offset: 1,
					color: '#ffead1'
				},
				{
					offset: 0,
					color: '#3b3b4a'
				}
			])
		];
		// 绘制图表
		myChart.value.setOption({
			 // backgroundColor: '#fff',
			  color: color,
			  grid: {
			    top: '15%',
			    bottom: '54%',
			    left: "30%",
			    containLabel: false
			  },
			  yAxis: [{
			    type: 'category',
			    inverse: true,
			    axisLine: {
			      show: false
			    },
			    axisTick: {
			      show: false
			    },
			    axisLabel: {
			      formatter: function(params: any) {
			        let item = props.echartData[params];
			        // console.log(item.name)
					return '{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|元}'
			        // return '{line|}{circle|●}{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|元}'
			      },
			      interval: 0,
			      inside: true,
			      textStyle: {
			        color: "#333",
			        fontSize: 14,
			        rich: {
			          line: {
			            width: 170,
			            height: 10,
			            backgroundColor: {
			              image: dashedPic
			            }
			          },
			          name: {
			            color: '#ffffff',
			            fontSize: 8,
			          },
			          bd: {
			            color: '#ffffff',
			            padding: [0,
			              5],
			            fontSize: 8,
			          },
			          percent: {
			            color: '#ffffff',
			            fontSize: 8,
			          },
			          value: {
			            color: '#ffffff',
			            fontSize: 8,
			            fontWeight: 500,
			            padding: [0,
			              0,
			              0,
			              20]
			          },
			          unit: {
			            fontSize: 14
			          }
			        }
			      },
			      show: true
			    },
			    data: lineYAxis
			  }],
			  xAxis: [{
			    show: false
			  }],
			  series: pieSeries
		})
	}
</script>

<style lang="scss" scoped>
	.tags {
		flex-flow: wrap;
		.item {
			font-size: 10px;
			width: 30%;
		}
	}
	.tag {
		width: 10px;
		height: 10px;
		border-radius: 3px;
		margin-right: 5px;
	}
</style>
